<template>
  <div id="navs" >
    <div id="navss">
      <div ref="my" class="navlog"><img src="../assets/images/知遇1.png" alt=""></div>
        <div class="navbox">
          <router-link to="/Home" tag="li" class="li"><span>首页</span></router-link>
          <router-link to="/Blogs" tag="li"  class="li"><span>专栏</span></router-link>
          <router-link to="/index/content" tag="li"  class="li"><span>社区</span></router-link>
          <router-link to="/mainshow/bookshop" tag="li"  class="li"><span>书店</span></router-link>
          <router-link to="/Talk" tag="li"  class="li"><span>闲嗑</span></router-link>
        </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name :'homenav',
  data() {
    return {
       
    };
  },
}
</script>

<style>
      #navs{
            width: 100%;
            height: 100px;
            position: absolute;
            top: 0;
            z-index: 100;
            transition: background-color 0.2s,position .2s,box-shadow 0.3s,height 0.3s;
        }
        #navss{
            position: absolute;
            width: 1200px;
            height: 100px;
            left: 50%;
            top: 0;
            transform:translate(-50%,0);
        }
        #navss .navlog{
            float: left;
        }
        #navss .navbox{
            float: right;
            line-height: 50px;
        }
        #navss .navbox .li{
            float: left;
            position: relative;
            list-style: none;
            margin-right: 20px;
            margin-left: 30px;
            margin:20px 30px;
            padding:0 5px;
            text-decoration:none;
            color: white;
            font-size: 18px;
            font-family: microsoft yahei light,microsoft yahei,Helvetica,sans-serif,等线;
            /* border-bottom:2px solid  transparent; */
            /* border-bottom: 2px solid red; */
            transition:border 0.25s;
            /* display: inline-block; */
        }
        #navss .navbox .li ::after{
            content: "";
            position: absolute;
            bottom: -1px;
            left: -1px;
            right: -1px;
            top: -1px;
            transform:scale(0, 1);
            transition: all 0.3s;
            border-bottom: 2px solid rgb(67,149,255);
        }
        #navss .navbox .li:hover ::after{
            transform:scale(1);
            transition:all .3s;
        }
        
</style>
<script>
export default {
  mounted() {
    props: ["for-child-msg"]
  },
}
</script>